<template>
  <el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl"
             custom-class="drawer-right-side" :before-close="closeDrawer"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="100px" class="ruleForm">
      <el-form-item label="品牌" prop="brand_id">
        <picker-view type="company" v-model="ruleForm.brand_id" placeholder="请选择品牌"></picker-view>
      </el-form-item>

      <el-form-item label="渠道来源" prop="source_id">
        <source-picker-view ref="sourcePickerRef" type="source" v-model="ruleForm.source_id" placeholder="请选择渠道"
        ></source-picker-view>
      </el-form-item>

      <el-form-item label="花费日期" prop="cost_date">
        <el-date-picker v-model="ruleForm.cost_date" type="date" value-format="yyyy-MM-dd" placeholder="请选择花费日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="花费金额" prop="cost">
        <el-input v-model="ruleForm.cost" placeholder="请输入客户姓名"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="ruleForm.remark" maxlength="500" show-word-limit placeholder="备注"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import pickerView from '@/components/picker/select.vue'
import {
  doCreateCostApi,
  doUpdateCostApi
} from '@/api/customer/cost.js'

import sourcePickerView from '@/components/picker/source.vue'

const ruleForm = {
  id: '',
  brand_id: '',
  source_id: '',
  cost_date: '',
  cost: '',
  remark: ''
}

export default {
  components: {
    pickerView,
    sourcePickerView
  },
  data() {
    return {
      formDrawer: {
        title: '添加客资',
        visible: false
      },
      ruleForm: JSON.parse(JSON.stringify(ruleForm)),
      rules: {
        brand_id: [{
          required: true,
          message: '请选择品牌'
        }],
        source_id: [{
          required: true,
          message: '请选择渠道'
        }],
        cost_date: [{
          required: true,
          message: '请选择花费日期'
        }],
        cost: [{
          required: true,
          message: '请输入花费金额'
        }]
      }
    }
  },
  methods: {
    showDrawer(row) {
      if (row) {
        this.formDrawer.title = '编辑信息'
        this.ruleForm = JSON.parse(JSON.stringify(row))
      } else {
        this.formDrawer.title = '添加信息'
        this.ruleForm = JSON.parse(JSON.stringify(ruleForm))
      }

      this.formDrawer.visible = true
      this.$nextTick(() => {
        this.$refs['sourcePickerRef'].clearCascader()
      })
    },

    closeDrawer() {
      this.formDrawer.visible = false
    },

    submit() {
      let _this = this
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        let data = Object.assign({}, _this.ruleForm)

        if (data.id) {
          // 编辑
          doUpdateCostApi(data).then(res => {
            _this.$message.success('编辑成功')
            _this.closeDrawer()
            _this.$emit('refresh')
          })
        } else {
          // 添加
          doCreateCostApi(data).then(res => {
            _this.$message.success('添加成功')
            _this.closeDrawer()
            _this.$emit('refresh')
          })
        }
      })
    }
  }
}
</script>

<style>
.contacts {
  margin: 0 0 18px;
}

.line {
  text-align: center;
}
</style>
